<template>
  <div class="alarm-management">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <span>报警类型 : </span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="typeSelect"  collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <span>持续时长 : </span>
      <div class="layoutBox" style="width:100px">
        <el-input-number v-model="duration" controls-position="right" :min="0"></el-input-number>
      </div> 分钟以上&emsp;&emsp;
      <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <ul class="alarm-statistics-list clear">
      <li>
        <div class="alarm-info">
          <p class="title">本周报警平均处理用时</p>
          <p class="content-text"><i class="el-icon-time"></i> {{ useTime }}</p>
        </div>
      </li>
      <li>
        <div class="alarm-info">
          <p class="title">本周处理完成报警任务数</p>
          <p class="content-text"><i class="iconfont icon-dongtaiguankong"></i> {{ taskNumber }}个</p>
        </div>
      </li>
      <li>
        <div class="alarm-info">
          <p class="title">待处理报警数</p>
          <p class="content-text"><i class="iconfont icon-baojing"></i> {{ alarmNumber }}个</p>
        </div>
      </li>
    </ul>
    <div class="alarm-modular modular-box">
      <div class="modular-head">
        <span class="title">报警列表</span>
        <div class="modular-toolbar">
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small">
              <el-radio-button label="1">全部</el-radio-button>
              <el-radio-button label="2">进行中</el-radio-button>
              <el-radio-button label="3">等待中</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-box" style="width: 164px;">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" class="search-input" placeholder="请输入"/>
          </div>
        </div>
      </div>
      <div class="modular-body">
        <el-scrollbar style="height: 100%">
          <ul class="alert-list">
            <li v-for="(item,index) in alarmList" :key="index">
              <el-row>
                <el-col :span="8">
                  <p><i class="site-icon"></i><span class="site-name">{{ item.siteName }}</span></p>
                  <p class="content-text"><span>{{ item.contentText }}</span></p>
                </el-col>
                <el-col :span="3">
                  <p><span class="label-text">运维</span></p>
                  <p><span>{{ item.operation }}</span></p>
                </el-col>
                <el-col :span="3">
                  <p><span class="label-text">开始时间</span></p>
                  <p><span>{{ item.startTime }}</span></p>
                </el-col>
                <el-col :span="6">
                  <p><span>已用时：{{ item.usedTime }}</span></p>
                  <div class="progress-wrap">
                    <!--<el-progress :percentage="item.usedProgress" :show-text="false"></el-progress>-->
                    <div class="node-progress">
                      <div class="spot-active-wrap"
                           :class="{stateA:item.handleState === 0,
                              stateB:item.handleState === 1,stateC:item.handleState === 2}">
                        <el-popover
                          placement="top"
                          :title="n.time"
                          width="200"
                          trigger="hover"
                          v-for="(n,m) in item.nodeList"
                          :key="m+'t'"
                          :content="n.content">
                          <span class="spot-active" slot="reference"></span>
                        </el-popover>
                      </div>
                      <span class="spot" v-for="(t,i) in 5" :key="t+'c'" :class="{first: i === 0}"></span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button type="secondBtn">处理</el-button>
                  <el-button type="secondBtn">生成任务</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="label-state-wrap">
                    <span class="label-state"> {{ item.alarmType }} </span>
                    <span class="label-state" v-if="item.stateType === 1"> 持续中 </span>
                    <span class="label-state state-a" v-if="item.stateType === 2"> 已结束 </span>
                    <span class="label-state state-b" v-if="item.handleState === 0"> 未响应 </span>
                    <span class="label-state" v-if="item.handleState === 1"> 已响应 </span>
                    <span class="label-state state-a" v-if="item.handleState === 2"> 已处理 </span>
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'alarmManage',
    data(){
      return{
        dateRange:'',
        typeSelect:'',
        optionData:[],
        duration:'',
        useTime:'12小时32分钟',//本周报警平均处理用时绑定数据
        taskNumber:'62',//本周处理完成报警任务数绑定数据
        alarmNumber:'8',//待处理报警数
        stateRadio: 1,
        alarmList:[{
          id:'1',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:70,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 09:00:00',
            content:'工程师通过pc端响应，诊断为报警。'
          },{
            time:'2019-01-01 10:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 11:00:00',
            content:'远程巡检查看历史数据，实时工况，并进行了哪些远程反控'
          },{
            time:'2019-01-01 12:00:00',
            content:'工程师至现场巡检'
          }],
          alarmType:'仪器传输',
          stateType:1,
          handleState:1
        },{
          id:'2',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:30,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          }],
          alarmType:'仪器传输',
          stateType:2,
          handleState:0
        },{
          id:'1',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:70,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          }],
          alarmType:'仪器传输',
          stateType:1,
          handleState:2
        },{
          id:'1',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:70,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          }],
          alarmType:'仪器传输',
          stateType:1,
          handleState:1
        },{
          id:'2',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:30,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          }],
          alarmType:'仪器传输',
          stateType:2,
          handleState:0
        },{
          id:'1',
          siteName:'生米',
          contentText:'橘子洲站高锰酸钾盐还原液试剂报警',
          operation:'吴加好（宇星）',
          startTime:'2016-06-16 14:03',
          usedTime:'00:45:00',
          usedProgress:70,
          nodeList:[{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          },{
            time:'2019-01-01 08:00:00',
            content:'仪器传输：水样数据超过上限'
          }],
          alarmType:'仪器传输',
          stateType:1,
          handleState:2
        }]
      }
    },
    created(){
      this.$store.commit("setShowlefttree", false);
    }
  }
</script>

<style scoped lang="less">
  .alarm-management{
    height: 100%;
    .alarm-statistics-list{
      margin-top: 6px;
      li{
        float: left;
        border: 1px solid #d9e6f7;
        width: calc(33.33% - 4px);
        margin-right: 6px;
        text-align: center;
        &:last-child{
          margin-right: 0;
        }
        .alarm-info{
          display: inline-block;
          padding: 16px 0;
          text-align: left;
          .title{
            color: #666666;
            line-height: 24px;
            margin-bottom: 4px;
          }
          .content-text{
            font-size: 22px;
            line-height: 30px;
            i{
              color: #166dce;
            }
            .iconfont{
              font-size: 22px;
            }
          }
        }
      }
    }
    .alarm-modular{
      height: calc(100% - 155px);
      margin-top: 6px;
      .modular-toolbar{
        float: right;
      }
    }
  }
  .modular-box{
    border: 1px solid #dce9fa;
    .modular-head{
      padding: 7px 12px;
      border-bottom: 1px solid #dce9fa;
      line-height: 30px;
      .title{
        font-size: 16px;
      }
      .title:before{
        content:'';
        display: inline-block;
        width: 3px;
        height: 10px;
        background: #166bce;
        margin: 0 6px 1px 0;
      }
    }
    .modular-body{
      height: calc(100% - 45px);
      .alert-list{
        padding: 0 16px;
        &>li{
          padding: 20px 0;
          border-bottom: 1px solid #dce9fa;
          .el-col{
            line-height: 26px;
            color: #666666;
            padding-right: 32px;
            position: relative;
            &:first-child{
              padding-left: 28px;
            }
          }
          .site-icon{
            position: absolute;
            width: 20px;
            height: 29px;
            background: url("../../assets/images/state-icon.png") no-repeat;
            left: 0;
            top: 0;
          }
          .content-text{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .site-name{
            font-size: 16px;
            color: #333;
            font-weight: 700;
          }
          .label-text{
            color: #999999;
          }
          .progress-wrap{
            padding-top: 10px;
            .node-progress{
              padding-right: 15px;
              padding-left: 9px;
              position: relative;
              .first.spot{
                width: 0;
              }
              .spot{
                display: block;
                float: left;
                height: 3px;
                width: 25%;
                background: #d1def0;
                position: relative;
                &:before{
                  content: '';
                  position: absolute;
                  width: 9px;
                  height: 9px;
                  border-radius: 50%;
                  background: #d1def0;
                  top: -3px;
                  right: 0;
                }
              }
              .spot-active-wrap{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 2;
                padding-left: 9px;
                padding-right: 15px;
                &>span{
                  display: block;
                  float: left;
                  width: 25%;
                  height: 3px;
                  position: relative;
                  &:first-child{
                    width: 0;
                  }
                }
                .spot-active{
                  position: absolute;
                  width: 9px;
                  height: 9px;
                  border-radius: 50%;
                  right: 0;
                  top: -3px;
                  cursor: pointer;
                }
              }
              .stateA.spot-active-wrap{
                &>span{
                  background: #ff3333;
                }
                .spot-active{
                  background: #ff3333;
                }
              }
              .stateB.spot-active-wrap{
                &>span{
                  background: #166bce;
                }
                .spot-active{
                  background: #166bce;
                }
              }
              .stateC.spot-active-wrap{
                &>span{
                  background: #36c25e;
                }
                .spot-active{
                  background: #36c25e;
                }
              }
            }
          }
          .label-state{
            display: inline-block;
            vertical-align: top;
            width: 70px;
            height: 24px;
            line-height: 22px;
            text-align: center;
            border: 1px solid #166bce;
            border-radius: 12px 0;
            font-size: 12px;
            color: #166bce;
          }
          .label-state-wrap{
            padding-top: 8px;
          }
          .state-a{
            color: #36c25e;
            border-color: #36c25e;
          }
          .state-b{
            color: #ff3333;
            border-color: #ff3333;
          }
        }
        &>li:last-child{
          border-bottom: none;
        }
      }
    }
  }
  .state-radio-wrap{
    display: inline-block;
    vertical-align: top;
  }
  .search-box{
    display: inline-block;
    vertical-align: top;
    position: relative;

    height: 30px;
    line-height: 30px;
    .icon-sousuo{
      position: absolute;
      right: 10px;
      top: 0;
      color: #7c8fa4;
      cursor: pointer;
      font-size: 14px;
      z-index: 2;
    }
    .icon-sousuo:hover{
      color: #166bce;
    }
    .icon-sousuo:active{
      color: #1056a7;
    }
    .search-input{
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 30px;
      top: 0;
      left: 0;
      padding-left: 5px;
      padding-right: 32px;
      outline: none;
      border: 1px solid #c6d1de;
    }
  }
</style>
